import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { BarChart3, TrendingUp, Users, ShoppingCart, DollarSign, Eye, Download } from "lucide-react";

export default function AnalyticsPage() {
  const chartData = [
    { month: "1月", sales: 12000, users: 800, orders: 450 },
    { month: "2月", sales: 15000, users: 950, orders: 520 },
    { month: "3月", sales: 18000, users: 1100, orders: 600 },
    { month: "4月", sales: 14000, users: 900, orders: 480 },
    { month: "5月", sales: 22000, users: 1300, orders: 750 },
    { month: "6月", sales: 25000, users: 1500, orders: 850 },
  ];

  const topProducts = [
    { name: "iPhone 15 Pro", sales: 156, revenue: "¥1,403,844" },
    { name: "MacBook Air M2", sales: 89, revenue: "¥889,911" },
    { name: "AirPods Pro", sales: 234, revenue: "¥444,366" },
    { name: "iPad Air", sales: 78, revenue: "¥374,322" },
    { name: "Apple Watch Series 9", sales: 123, revenue: "¥393,477" },
  ];

  const recentActivity = [
    { time: "2分钟前", event: "新用户注册", user: "张三", details: "注册了新账户" },
    { time: "5分钟前", event: "订单完成", user: "李四", details: "购买了 iPhone 15 Pro" },
    { time: "10分钟前", event: "产品上架", user: "系统", details: "新增产品 AirPods Max" },
    { time: "15分钟前", event: "用户登录", user: "王五", details: "从北京登录" },
    { time: "20分钟前", event: "订单取消", user: "赵六", details: "取消了 MacBook 订单" },
  ];

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">数据分析</h1>
          <p className="text-muted-foreground">查看系统运营数据和趋势分析</p>
        </div>
        <div className="flex items-center space-x-2">
          <Select defaultValue="7d">
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7d">最近7天</SelectItem>
              <SelectItem value="30d">最近30天</SelectItem>
              <SelectItem value="90d">最近90天</SelectItem>
              <SelectItem value="1y">最近1年</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出报告
          </Button>
        </div>
      </div>

      {/* 关键指标 */}
      <div className="grid gap-6 md:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">总收入</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">¥123,456</div>
            <div className="flex items-center pt-1">
              <TrendingUp className="h-4 w-4 text-green-500" />
              <span className="text-sm text-green-600 ml-1">+15%</span>
              <span className="text-sm text-muted-foreground ml-1">相比上月</span>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">总用户数</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">12,345</div>
            <div className="flex items-center pt-1">
              <TrendingUp className="h-4 w-4 text-green-500" />
              <span className="text-sm text-green-600 ml-1">+12%</span>
              <span className="text-sm text-muted-foreground ml-1">相比上月</span>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">总订单数</CardTitle>
            <ShoppingCart className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">8,901</div>
            <div className="flex items-center pt-1">
              <TrendingUp className="h-4 w-4 text-green-500" />
              <span className="text-sm text-green-600 ml-1">+8%</span>
              <span className="text-sm text-muted-foreground ml-1">相比上月</span>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">转化率</CardTitle>
            <BarChart3 className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-foreground">3.2%</div>
            <div className="flex items-center pt-1">
              <TrendingUp className="h-4 w-4 text-green-500" />
              <span className="text-sm text-green-600 ml-1">+0.5%</span>
              <span className="text-sm text-muted-foreground ml-1">相比上月</span>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 图表和详细数据 */}
      <Tabs defaultValue="overview" className="space-y-6">
        <TabsList>
          <TabsTrigger value="overview">概览</TabsTrigger>
          <TabsTrigger value="sales">销售分析</TabsTrigger>
          <TabsTrigger value="users">用户分析</TabsTrigger>
          <TabsTrigger value="products">产品分析</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-6">
          <div className="grid gap-6 md:grid-cols-2">
            {/* 销售趋势图 */}
            <Card>
              <CardHeader>
                <CardTitle>销售趋势</CardTitle>
                <CardDescription>最近6个月的销售数据</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {chartData.map((data) => (
                    <div key={data.month} className="flex items-center justify-between">
                      <span className="text-sm font-medium">{data.month}</span>
                      <div className="flex items-center space-x-4">
                        <div className="flex items-center space-x-2">
                          <div className="h-3 w-20 bg-blue-100 rounded-full overflow-hidden">
                            <div 
                              className="h-full bg-blue-500 rounded-full" 
                              style={{ width: `${(data.sales / 25000) * 100}%` }}
                            />
                          </div>
                          <span className="text-sm text-muted-foreground">¥{data.sales.toLocaleString()}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* 用户增长图 */}
            <Card>
              <CardHeader>
                <CardTitle>用户增长</CardTitle>
                <CardDescription>最近6个月的用户增长趋势</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {chartData.map((data) => (
                    <div key={data.month} className="flex items-center justify-between">
                      <span className="text-sm font-medium">{data.month}</span>
                      <div className="flex items-center space-x-4">
                        <div className="flex items-center space-x-2">
                          <div className="h-3 w-20 bg-green-100 rounded-full overflow-hidden">
                            <div 
                              className="h-full bg-green-500 rounded-full" 
                              style={{ width: `${(data.users / 1500) * 100}%` }}
                            />
                          </div>
                          <span className="text-sm text-muted-foreground">{data.users}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* 热门产品 */}
          <Card>
            <CardHeader>
              <CardTitle>热门产品</CardTitle>
              <CardDescription>销量最高的产品排行</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {topProducts.map((product, index) => (
                  <div key={product.name} className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <Badge variant="outline" className="w-8 h-8 flex items-center justify-center">
                        {index + 1}
                      </Badge>
                      <div>
                        <div className="font-medium">{product.name}</div>
                        <div className="text-sm text-muted-foreground">销量: {product.sales}</div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-medium">{product.revenue}</div>
                      <div className="text-sm text-muted-foreground">收入</div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="sales" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>销售分析</CardTitle>
              <CardDescription>详细的销售数据和分析</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="text-center py-8 text-muted-foreground">
                <BarChart3 className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                <p>销售分析图表将在这里显示</p>
                <p className="text-sm">包含销售趋势、地区分布、产品类别等详细分析</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="users" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>用户分析</CardTitle>
              <CardDescription>用户行为和特征分析</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="text-center py-8 text-muted-foreground">
                <Users className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                <p>用户分析图表将在这里显示</p>
                <p className="text-sm">包含用户增长、活跃度、留存率等详细分析</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="products" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>产品分析</CardTitle>
              <CardDescription>产品表现和库存分析</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="text-center py-8 text-muted-foreground">
                <ShoppingCart className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                <p>产品分析图表将在这里显示</p>
                <p className="text-sm">包含产品销量、库存周转、利润率等详细分析</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* 实时活动 */}
      <Card>
        <CardHeader>
          <CardTitle>实时活动</CardTitle>
          <CardDescription>系统内的最新动态</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {recentActivity.map((activity, index) => (
              <div key={index} className="flex items-center space-x-4">
                <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
                  <Eye className="h-4 w-4 text-primary" />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium">
                    <span className="text-foreground">{activity.event}</span>
                    <span className="text-muted-foreground"> - {activity.user}</span>
                  </p>
                  <p className="text-xs text-muted-foreground">{activity.details} • {activity.time}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
} 